<template>
  <div class="form-search">
    <el-form v-if="formItem && formItem.length > 0" :inline="true" :model="form">
      <el-form-item
        v-for="(item, index) in formItem"
        :key="item.label"
        :label="item.label"
        :prop="item.value"
        :label-width="item?.labelWidth"
      >
        <!-- 下拉 -->
        <el-select v-if="item.type === 'select'" v-model="form[item.value]" clearable>
          <el-option
            v-for="(option, i) in item.options"
            :key="option[item.valueKey]"
            :value="option[item.valueKey]"
            :label="option[item.labelKey]"
          />
        </el-select>
        <!--文本-->
        <el-input v-if="item.type === 'text'" v-model="form[item.value]" clearable />
        <!--日期-->
        <el-date-picker
          v-if="item.type === 'datetimerange'"
          v-model="form[item.value]"
          type="datetimerange"
          value-format="YYYY-MM-DD HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="emit('searchForm', form)">查询</el-button>
        <el-button v-if="clearBtnFlag" type="primary" :icon="Refresh" @click="clearData">
          重置
        </el-button>
        <slot></slot>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { getCurrentInstance, reactive } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance()
defineProps({
  formItem: {
    // form查询项
    type: Array,
    default: () => []
  },
  formData: {
    // form查询数据
    type: Object,
    default: () => {}
  },
  clearBtnFlag: {
    type: Boolean,
    default: () => true
  }
})
// 声明触发的事件
const emit = defineEmits(['searchForm', 'clearForm'])
const form = reactive(JSON.parse(JSON.stringify(proxy.formData))) // form查询数据

const clearData = () => {
  // 清空搜索栏
  Object.keys(form).map((key) => {
    form[key] = ''
  })
  emit('clearForm', form)
}
</script>

<style scoped lang="scss"></style>
